<template>
  <div ref="elRoot" class="app-container"> 
    <div class="page-header">
      <div class="contrl-border" style="-webkit-app-region: drag;">
        <i class="logo logo-icon bi bi-boxes"></i>
        <span class="logo logo-name">X魔方 - Cubex v0.1.0</span>
      </div>
      <div class="header-menus"></div>
      <div class="frame-contrl">
        <a class="s-btn min-btn bi-dash-lg" @click="trunWindow" href="javascript:;"></a>
        <a class="s-btn max-btn bi-subtract" @click="trunWindow" href="javascript:;"></a>
        <a class="s-btn close-btn bi-x-lg" @click="trunWindow"  href="javascript:;"></a>
      </div>
    </div>
    <div class="main-content">
        <MenuBar></MenuBar>
        <div class="work-space">
          <Tab></Tab>
        </div>
        <div class="work-sider" v-resizable="'left'"></div>
    </div>
    <div class="page-foot">
      <span style="color:bisque">ready</span>
    </div>
  </div>
</template>


<script lang="ts" setup>
  import MenuBar from '@components/layout/menu-bar.vue';
  import Tab from '@components/tabs.vue';
  import { ComponentInternalInstance, getCurrentInstance } from 'vue';
  import $ from 'jquery'
  // import ipc from '../ipcs/index'
  import {ref} from 'vue'

  const self = getCurrentInstance() as ComponentInternalInstance
  const elRoot = ref(null)
  const headername = ref('头部菜单')
  const footname = ref('状态菜单')

  const trunWindow = (e: Event)=>{
    const target = e.target
    $(target).hasClass('max-btn') && (window.ipc.send('window-max'));
    $(target).hasClass('min-btn') && window.ipc.send('window-min');
    $(target).hasClass('close-btn') && window.ipc.send('window-close');
  }

  window.ipc.on('window-max', (e: Event, flg : Boolean)=>{
    console.log(e)
    const btn = $(elRoot.value).find('.max-btn')
    flg ? $(btn).removeClass('bi-tv').addClass('bi-subtract') : $(btn).removeClass('bi-subtract').addClass('bi-tv');
  })
</script>

<style lang="scss">
.app-logo{
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  color: #ffc107;
  .bi{
    color: #ffc107;
    vertical-align: 0em;
  }
}
.app-name{
  font-size: 14px;
  /* line-height: 20px; */
  display: inline-block;
  height: 30px;
  line-height: 30px;
  position: absolute;
  margin-left: -5px;
  color: #ffc107;
}
#cubex-app{
  .logo{
    display: inline-block;
    font-size:14px;
    margin-left:3px;
    //color:#ffb52f;
  }
  .logo-icon{
    font-size:16px;
    line-height:30px;
  }
  .logo-name{
    margin-left:3px;
  }
  position:fixed;
  .app-container{
    display: flex;
    flex-flow: column;
    height:100vh;
    width:100vw;
  }
  background-color: #270101;
  .main-content{ 
    position: relative;
    background-color: #f1f1f1;
    flex: 1;    
    display: flex;
    flex-flow: row;
    .work-space{ 
      flex:1;
      display: flex;
    }
    .work-sider{
      position:relative;
      background-color: #e7e7e7;
      border: 1px solid rgb(221, 221, 221);
      box-shadow: rgb(255 255 255) 1px 1px 3px 0px inset;
      padding: 8px 10px;
      width: 22px;
    }

    .manager-container{
      display: flex;
      flex-flow: column;
      height: 100%;
      width: 500px;
      background-color: bisque;
    }
  }

  .page-header{
    position: relative;
    height:$header-height;
    background-color: #23282d;
    width:100%;
    color:#fff;
    display: flex;
    color:#ccc;
    .contrl-border{
      position:absolute;
      left:0;right:150px;
      top:0;height:$header-height;
      z-index: 0;
    }
    .s-btn{
      display: inline-block;
      width: 50px;
      height:100%;
      text-align:center;
      color:#a5a5a5;
      text-decoration: none;
      line-height: 1.8rem;
      &:hover{
        background-color: rgb(97, 97, 97);
        color: #fff;
      }
      &.close-btn:hover{
        background-color: rgb(175, 61, 61);
      }
    }
    .header-menus{
      flex:1;
    }
    .frame-contrl{
      padding-right:0px;
      height:100%;
      display:flex;
    }
  }
  .page-foot{
    position: relative;
    height: 20px;
    background-color: rgb(28, 28, 28);
    color: #fff;
    font-size: 12px;
    border: 1px solid #000000;
    border-radius: 3px 3px 0 0;
    padding: 0 8px;
    box-shadow: 0px 0px 10px -1px #7e7e7e inset;
  }
}
</style>
